<template>
  <el-form :model="formData" :rules="rules" ref="productForm" label-position="right" label-width="120px">
    <el-row>
      <el-col :span="12">
        <el-form-item label="名称" prop="name">
          <el-input v-model="formData.name" maxlength="32"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="编号">
          <el-input v-model="formData.no" maxlength="32"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="市场价">
          <el-input v-model="formData.marketPrice"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="现价">
          <el-input v-model="formData.price"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="图标">
          <el-input v-model="formData.smallImage"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="描述">
          <el-input v-model="formData.description"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="排序值">
          <el-input v-model="formData.idx"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="上架">
          <el-switch v-model="formData.enabled"></el-switch>
        </el-form-item>
      </el-col>
    </el-row>
    <el-form-item style="text-align: right;margin-top: 10px;">
      <el-button @click="submit(formData)" type="primary">提交</el-button>
      <el-button @click="loadData(row.id)">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  name: "ProductEditor",
  components: {},
  props: ['row'],
  data() {
    return {
      roleSelectorVisible: false,
      formData: {},
      rules: {
        name: [{required: true, message: '请输入产品名称', trigger: 'change'}]
      }
    };
  },
  mounted() {
    this.loadData(this.row.id);
  },
  methods: {
    submit(data) {
      this.$refs.productForm.validate((valid) => {
        if (valid) {
          this.axios({
            url: "management/product/save",
            method: "POST",
            data: data
          }).then(resp => {
            if (resp.data.success == true) {
              this.$notify({type: "success", title: '提示', message: '产品数据保存成功！', offset: 0, duration: 2000});
              this.$emit("save-success", resp.data)
            } else {
              this.$notify({type: "error", title: '提示', message: '产品数据保存失败！', offset: 0, duration: 2000});
            }
          })
        } else {
          this.$notify({type: "error", title: '提示', message: '产品数据验证未通过！', offset: 0, duration: 2000});
        }
      });
    },
    loadData(id) {
      if (id) {
        this.axios({
          url: "management/product/get_by_id",
          method: "POST",
          data: this.$qs.stringify({id: id})
        }).then(resp => {
          if (resp.data.success == true) {
            this.formData = resp.data.data
          }
        })
      } else {
        this.formData = this.row;
        this.$nextTick(function () {
          this.$refs.productForm.clearValidate();
        })
      }

    }
  },
  watch: {
    row: {
      handler: function (nv, ov) {
        let me = this;
        me.formData = {};
        this.$nextTick(function () {
          me.loadData(nv.id)
          me.$refs.productForm.clearValidate();
        })
      },
      deep: true
    }
  }
}
</script>

<style scoped>

</style>
